<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css text-overflow</title>

    <style type="text/css">
        div.test {
            /* 要强制溢出发生并且应用 ellipsis 值，作者必须设置对象的 white-space 属性值为 nowrap 。 */
            white-space: nowrap;
            width: 12em;
            overflow: hidden;
            border: 1px solid #000000;
        }
    </style>
</head>
<body>

    <div class="test" style="width: 12em">
        This is some long text that will not fit in the box
    </div>
    <hr>

    <div class="test" style="width: 12em; text-overflow: ellipsis">
        This is some long text that will not fit in the box
    </div>
    <hr>

    <div class="test" style="width: 12em; text-overflow: clip">
        This is some long text that will not fit in the box
    </div>
    <hr>

    <div class="test" style="width: 12em; text-overflow: 'abc'">
        This is some long text that will not fit in the box
    </div>
    <hr>

</body>
</html>